<template>
  <div id="app">
    <el-row>
      <el-col :span="8" class="center">
        <el-autocomplete placeholder="请输入你要搜索的内容" v-model="search" @focus="focus" @blur="blur" @keyup.enter.native="searchHandler"
          clearable>
          <el-button slot="append" icon="el-icon-search" id="search" @click="searchHandler"></el-button>
        </el-autocomplete>
        <el-card @mouseenter="enterSearchBoxHanlder" v-if="isSearch" class="box-card" id="search-box"
          style="position:relative;z-index:15">
          <dl v-if="isHistorySearch">
            <dt class="search-title" v-show="history">历史搜索</dt>
            <dt class="remove-history" v-show="history" @click="removeAllHistory">
              <i class="el-icon-delete">清空历史记录</i>
            </dt>
            <el-tag v-for="search in historySearchList" :key="search.id" closable :type="search.type"
              @close="closeHandler(search)" style="margin-right:5px; margin-bottom:5px;">
              {{search.name}}
            </el-tag>
            <dt class="search-title">热门搜索</dt>
            <dd v-for="search in hotSearchList" :key="search.id">{{search}}</dd>
          </dl>
          <dl v-if="isSearchList">
            <dd v-for="search in searchList" :key="search.id">{{search}}</dd>
          </dl>
        </el-card>
      </el-col>
    </el-row>
    <router-view/>
  </div>
</template>
<script>
  import RandomUtil from "../utils/randomUtil";
  import Store from "../utils/store";
  export default {
    name: 'App',
    data() {
      return {
        search: '',
        isFocus: false,
        hotSearchList: ["暂无热门搜索"],
        historySearchList: [],
        searchList: ["暂无数据"],
        history: false,
        types: ["", "success", "info", "warning", "danger"]
      };
    },
    methods: {
      focus() {
        this.isFocus = true;
        this.historySearchList =
          Store.loadHistory() == null ? [] : Store.loadHistory();
        this.history = this.historySearchList.length == 0 ? false : true;
      },
      blur() {
        var self = this;
        this.searchBoxTimeout = setTimeout(function() {
          self.isFocus = false;
        }, 300);
      },
      enterSearchBoxHanlder() {
        clearTimeout(this.searchBoxTimeout);
      },
      searchHandler() {
        let n = RandomUtil.getRandomNumber(0, 5);
        let exist =
          this.historySearchList.filter(value => {
            return value.name == this.search;
          }).length == 0
            ? false
            : true;
        if (!exist) {
          this.historySearchList.push({ name: this.search, type: this.types[n] });
          Store.saveHistory(this.historySearchList);
        }
        this.history = this.historySearchList.length == 0 ? false : true;
      },
      closeHandler(search) {
        this.historySearchList.splice(this.historySearchList.indexOf(search), 1);
        Store.saveHistory(this.historySearchList);
        clearTimeout(this.searchBoxTimeout);
        if (this.historySearchList.length == 0) {
          this.history = false;
        }
      },
      removeAllHistory() {
        Store.removeAllHistory();
      }
    },
    computed: {
      isHistorySearch() {
        return this.isFocus && !this.search;
      },
      isSearchList() {
        return this.isFocus && this.search;
      },
      isSearch() {
        return this.isFocus;
      }
    },
  }
</script>
<style>
  .center {
    margin-top: 15px;
    margin-left: 200px;
  }
  #search {
    background-color: #A0CFFF;
    border-radius: 0%;
  }
  .search-title {
    color: #82848A;
    font-size: 15px;
    margin-bottom: 5px;
  }
  .remove-history {
    color: #bdbaba;
    font-size: 15px;
    float: right;
    margin-top: -22px;
  }
  #search-box {
    width: 555px;
    height: 300px;
    margin-top: 0px;
    padding-bottom: 20px;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #F92672; //字的颜色
    margin-top: 60px;
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>
